 <template>
    <div>
        <div style="padding:5px">
            <div> 
                 {{store.state.materialData}}
                <el-button type="info" @click="startEnquiry(0)" style="float:right;" icon="el-icon-success">发布询价</el-button>
                <el-button type="info" @click="startEnquiry(1)" style="float:right;margin-right:20px;" icon="el-icon-time">保存询价</el-button>
                <el-button type="info" @click="refreshPage()" style="float:right;margin-right:20px;" icon="el-icon-refresh">刷新</el-button>
                <el-button type="info" @click="back()" style="float:right;margin-right:20px;" icon="el-icon-d-arrow-left">返回</el-button>
            </div>
            <span class="add-formtitle">询价主信息</span>
            <el-form :inline="true" :model="enquiryMainForm" ref="enquiryMainForm" class="demo-form-inline add-form" label-width="100px">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="enquiryMainForm.title"></el-input>
                </el-form-item>
                <el-form-item label="关联项目:" prop="compliantProduct">
                    <el-input v-model="enquiryMainForm.compliantProduct"></el-input>
                </el-form-item>
                <el-form-item label="品类：" prop="categoryName">
                    <select-tree :multiple="false" ref="selectTree" v-model="enquiryMainForm.categoryName"></select-tree>
                </el-form-item>
                <el-form-item label="采购组织：" prop="purOrgId">
                    <el-select v-model="enquiryMainForm.purOrgId" placeholder="请选择" @change="handleChange">
                        <el-option v-for="item in purOrgOptions" :key="item.id" :label="item.purOrgName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采购组：" prop="purGroupId">
                    <el-select v-model="enquiryMainForm.purGroupId" placeholder="请选择">
                        <el-option v-for="item in relationPurGroup" :key="item.id" :label="item.purGroupName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="询价方式：" prop="enquiryWay">
                    <el-select v-model="enquiryMainForm.enquiryWay" placeholder="请选择">
                        <el-option v-for="item in enquiryWays" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公布方式:" prop="resultNoticeType">
                    <el-select v-model="enquiryMainForm.resultNoticeType" placeholder="请选择">
                        <el-option v-for="item in resultNoticeTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发送通知：" prop="sendNoticeType">
                    <el-radio-group v-model="enquiryMainForm.sendNoticeType">
                        <el-radio label="1">邮件</el-radio>
                        <el-radio label="0">短信</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="采购公告：" prop="noticStatus">
                    <el-radio-group v-model="enquiryMainForm.noticStatus">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="启用秘钥:" prop="secretKeyStatu">
                    <el-radio-group v-model="enquiryMainForm.secretKeyStatus">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="单一来源:" prop="singleSourFlag">
                    <el-radio-group v-model="enquiryMainForm.singleSourFlag">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="附件上传：" class="w50 llabel">
                    <el-upload
                        class="upload-file"
                        ref="upload"
                        :action="this.lib.config.host.system + '/common/fileupload/upload'"
                        :data=fileData
                        :limit="1"
                        :on-success="uploadSuccess"         
                        :file-list="fileList">
                        <el-button slot="trigger" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注：" prop="name" class="w100">
                    <UE v-model="enquiryMainForm.notice" :config="config" ref="ue"></UE>
                </el-form-item> 
            </el-form>
        </div>
        <div style="padding:5px">
            <span class="add-formtitle">询价物料设置</span>
            <table>
                <el-row>
                    <el-form :inline="true" :model="enquiryMatForm" ref="enquiryMatForm" class="demo-form-inline add-form" label-width="100px">
                        <el-form-item label="采购组织：" prop="purOrgId">
                            <el-select v-model="enquiryMatForm.purOrgId1" placeholder="请选择" @change="handleChange">
                                <el-option v-for="item in purOrgOptions" :key="item.id" :label="item.purOrgName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报价类型：" prop="quoteType">
                            <el-select v-model="enquiryMatForm.quoteType" placeholder="请选择">
                                <el-option v-for="item in quoteTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报价模板:"  prop="templateId">
                            <el-select v-model="enquiryMatForm.templateId" placeholder="请选择">
                                <el-option v-for="item in templates" :key="item.value" :label="item.name" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报价条件:"  prop="paymentTermsId">
                            <el-select v-model="enquiryMatForm.paymentTermsId" placeholder="请选择">
                                <el-option v-for="item in paymentTerms" :key="item.id" :label="item.remarks" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="实施日期:" prop="priceStartDate">
                            <el-date-picker v-model="enquiryMatForm.priceStartDate" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="~" prop="priceEndDate" label-width="50px" style="position: relative;left: -105px;">
                            <el-date-picker  v-model="enquiryMatForm.priceEndDate" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row>
                    <el-col :span="50" style="width:60%;">
                        <span class="add-formtitle">询价物料设置</span>
                        <el-table :data="materialData" border style="width:100%" max-height="250" :default-sort="{prop: 'materialCode', order: 'descending'}">
                            <el-table-column prop="id" v-if="false"></el-table-column>
                            <el-table-column prop="srmPrNo" label="单据号" v-if="false"></el-table-column>
                            <el-table-column prop="materialId" label="物料ID" v-if="false"></el-table-column>
                            <el-table-column prop="purUnitCode" label="采购单位编码" v-if="false"></el-table-column>
                            <el-table-column type="selection" width="60"></el-table-column>
                            <el-table-column prop="srmItemNo" align="center" label="行号" width="80"></el-table-column>
                            <el-table-column prop="materialCode" align="center" label="物料编码" width="150"></el-table-column>
                            <el-table-column prop="materialName" align="center" label="物料名称" width="250"></el-table-column>
                            <el-table-column prop="purchaseQty" align="center" label="数量" width="100"></el-table-column>
                            <el-table-column prop="purUnitName" align="center" label="采购单位" width="100"></el-table-column>
                            <el-table-column prop="matGroupName" align="center" label="物料组" width="200"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="30" style="width:38%;margin-left:2%">
                        <span class="add-formtitle">询价物料设置</span>
                        <el-button type="info" style="float:right;">删除</el-button>
                        <el-button type="info" @click="openVendorTransfer()" style="float:right;margin-right:20px;" icon="el-icon-plus">添加</el-button>
                        <el-table :data="vendorData" border style="width: 100%" max-height="250" :default-sort="{prop: 'vendorCode', order: 'descending'}">
                            <el-table-column prop="id" v-if="false"></el-table-column>
                            <el-table-column prop="vendorId" v-if="false"></el-table-column>
                            <el-table-column type="selection" width="60"></el-table-column>
                            <el-table-column prop="sourceType" align="center" :formatter="sourceTypeFormatter" label="来源" width="100"></el-table-column>
                            <el-table-column prop="vendorCode" align="center" label="供应商编码" width="150"></el-table-column>
                            <el-table-column prop="vendorName" align="center" label="供应商名称" width="250"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </table>
        </div>
        <div>
            <el-dialog  :visible.sync="vendorDialogVisible" width="50%">
                 <vendors-transfer ref="trans" 
                    width="100%" :checkName="['vendorCode','vendorName']" 
                    :title="{left:'可选供应商',right:'已选供应商'}"
                    :searchForm="searchForm" :selectData="selectVendorData" 
                    :url="lib.config.host.system + '/system/orgmgt/organization/queryForNpcDatalist'">
                </vendors-transfer>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="vendorDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertVendor()">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import SelectTree from '@/components/common/select-ext/select-tree.vue';
    import UE from '@/components/common/ue/ue.vue';
    import vendorsTransfer from '@/components/common/select-ext/vendorsTransfer.vue';
    import Vuex from 'vuex'
    export default {
        components: {
            SelectTree,
            UE,
            vendorsTransfer,
        },
        data() {
            return {
                // 定义附件的业务模块和业务动作
                fileData: {
                    busAction: "ADD",
                    tableName: "CT_RFQ_ENQUIRY"
                },
                fileList: [],
                config: {
                    initialFrameWidth: 1450,
                    initialFrameHeight: 200,
                    enableAutoSave: false
                 },
                // 询价主信息表单对象
                enquiryMainForm:{
                    title:'',
                    compliantProduct:'',
                    categoryName:'',
                    purOrgId:'',
                    purGroupId:'',
                    enquiryWay:'',
                    resultNoticeType:'',
                    sendNoticeType:'',
                    noticStatus:'',
                    secretKeyStatus:'',
                    singleSourFlag:'',
                    notice:'',
                    attFileUrl:'',
                    attFileName:''
                },
                // 询价物料表单对象
                enquiryMatForm:{
                    purOrgId1:'',
                    purOrgName1:'',
                    quoteType:'',
                    templateId:'',
                    templateName:'',
                    paymentTermsId:'',
                    paymentTermsName:'',
                    priceStartDate:'',
                    priceEndDate:''
                },
                // 询价表单提交对象
                submitForm:{
                    materialsJsonStr:'',
                    vendorsJsonStr:''
                },
                // 采购组织集合
                purOrgOptions:[],
                // 采购组集合
                relationPurGroup: [],
                // 询价方式下拉
                enquiryWays:[{
                    value:'1',
                    name:'采购定价'
                },{
                    value:'2',
                    name:'市场询价'
                }],
                // 结果公布方式下拉
                resultNoticeTypes:[{
                    value:'1',
                    name:'不公开'
                },{
                    value:'2',
                    name:'半公开'
                }],
                // 报价类型
                quoteTypes:[{
                    value:'1',
                    name:'标准'
                },{
                    value:'2',
                    name:'委外'
                }],
                // 报价模板
                templates:[],
                 // 付款条件
                paymentTerms:[],
                // 物料表格
                materialData:[],
                // 供应商表格
                vendorData:[],
                // 对话框显示、隐藏属性
                vendorDialogVisible: false,
                searchForm:[
                    {key:'vendorType',type:'',value:''},
                    {key:'vendorCodeOrVendorName',type:'text',placeholder:'请输入名称',value:''}
                ],
                // 穿梭框选择的供应商
                selectVendorData:[],
            };
        },
        mounted() {
            this.initData();
            //this.loadMaterials();
            // this.loadVendors();
        },
        methods: {
            initData(){
                // 获取采购组织
                this.getSelectData('get', this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(), {}, 'id', 'purOrgName').then((data)=>{
                    this.purOrgOptions = data;
                });
                // 查询付款条件数据字典
                this.getDicData('PAYMENT_TYPE').then((data)=>{
                    this.paymentTerms = data;
                });
                // 获取报价模板
                // this.getSelectData('get', "", {}, 'id', 'templateName').then((data)=>{
                //     this.templates = data;
                // });
            },
            // 采购组织在改变的时候查询采购组
            handleChange(value) {
                // 获取srm采购组
                this.getSelectData('post', this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/' + value, {}, 'id', 'purGroupName').then((data)=>{
                    this.relationPurGroup = data;
                });
            },
            // 自动上传附件后返回附件url和name
            uploadSuccess: function (response) {
                //附件上传成功回调
                this.enquiryMainForm.attFileUrl = response.url;
                this.enquiryMainForm.attFileName = response.fileName
            },
            getUEContentTxt() {
                let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
                this.$notify({
                    message: content,
                    type: 'success'
                });
                console.log(content)
                return content;
            },
             // 页面初始化加载物料
            loadMaterials() {
                this.axios.post()
                    .then((res)=>{
                        this.materialData = res.data;
                        // /this.materialData = [{"vendorName":'xxxxxxxx'}];
                        //store.commit('storeMaterialData', this.materialData);
                           store.commit('storeMaterialData', {"vendorName":'xxxxxxxx'});
                    })
                    .catch((error)=>{
                        console.log(error);
                    })
            },
             // 页面初始化加载供应商
            loadVendors() {
               this.axios.post()
                   .then((res)=>{
                       this.vendorData = res.data;
                       store.commit('storeMaterialData', this.vendorData);
                   })
                   .catch((error)=>{
                       console.log(error);
                   })
            },
            // 打开供应商穿梭框
            openVendorTransfer(){
                this.vendorDialogVisible = true
            },
             // 动态插入供应商数据
            insertVendor(){
                this.vendorDialogVisible = false
                this.vendorData = this.selectVendorData;
            },
            // 格式化供应商来源类型
            sourceTypeFormatter(row, column){
                if(column === 1){
                   return "原供方"
                } else {
                   return "新增"
                }
            },
            // 保存或发布询价
            startEnquiry(opt){
                this.submitForm = {...this.enquiryMainForm,...this.enquiryMatForm};
                this.submitForm.materialsJsonStr = JSON.stringify(this.materialData);
                this.submitForm. vendorsJsonStr = JSON.stringify(this.vendorData);
                console.log(this.submitForm);
            },
            // 返回上一页面
            back(){
                this.$router.push({name:'PurRequestItem'});
            },
            // 刷新当前页面
            refreshPage(){
                this.resetForm('enquiryMainForm');
                this.resetForm('enquiryMatForm');
                this.materialData = store.state.materialData;
                this.vendorData = store.state.vendorData;
            }
        }
    };
    // vuex存储初始化数据
    const store = new Vuex.Store({
        state: {
            materialData : [],
            vendorData : []
        },
        mutations: {
            storeMaterialData (state,materialData) {
                state.materialData = materialData;
            },
            storeVendorData (vendorData) {
                state.vendorData = vendorData;
            },
        }
    });
</script>
<style>
    .upload-file{
        display: flex;
        flex-direction: row-reverse;
        height: 40px;
    }
    .upload-file .el-upload-list {
        display: flex;
        flex-direction: row;
        width: calc(100% - 112px);
        border: 1px solid #dcdfe6;
        margin-right: 16px;
        border-radius: 4px;
    }
    .upload-file .el-upload-list li{
        margin-top: 0;
        line-height: 38px;
        vertical-align: middle;
    }
    .upload-file .el-upload-list li .el-icon-close{
        line-height: inherit;
        top:0;
    }
</style>